<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />
		<link rel="stylesheet" type="text/css" href="../css/pages/perfectUser.css" />
	</head>

	<body>
		<div id="app">
			<!-- <div id="height" class="height-top"></div>
			<header class="header">
				<span class="header-title">完善信息</span>
			</header> -->
			<div class="content">
				<!-- <div class="user-photo" @click="headPortrait">
					<img v-if="filesPath" :src="filesPath" />
					<img v-else class="add" src="../images/add.png" />
				</div> -->

				<div class="itemClass">
					<input v-model="name" type="text" placeholder="请填写业主真实姓名" />
				</div>
				<div class="itemClass m-t-15" @click="housingTap">
					<span class="">小区</span>
					<span class="text">{{housingText?housingText:'选择小区'}}</span>
					<span class="mui-icon mui-navigate-right"></span>
				</div>
				<div class="itemClass" @click="buildingTap">
					<span class="">楼宇</span>
					<span class="text">{{buildingText?buildingText:'选择楼宇'}}</span>
					<span class="mui-icon mui-navigate-right"></span>
				</div>
				<div class="itemClass" @click="arithmeticTap">
					<span class="">单元</span>
					<span class="text">{{arithmeticText?arithmeticText:'选择单元'}}</span>
					<span class="mui-icon mui-navigate-right"></span>
				</div>
				<div class="itemClass" @click="houseNumberTap">
					<span class="">门牌</span>
					<span class="text">{{houseNumberText?houseNumberText:'选择门牌号'}}</span>
					<span class="mui-icon mui-navigate-right"></span>
				</div>
			</div>

			<div class="button-list">
				<div class="hint">
					确认核实业主信息，可享受物业缴费、投诉报修、小区拼车、业主分享等功能
				</div>
				<!-- <div class="succeed" @click="skipClick">跳过</div> -->
				<div class="succeed" @click="succeedClick">完成</div>
			</div>

		</div>

		<script src="../js/Width.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js"></script>
		<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.poppicker.js"></script>
		<script src="../js/Util.js" type="text/javascript" charset="utf-8"></script>

		<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
		<script type="text/javascript">
			mui.init({
				beforeback: function() {
					//获得列表界面的webview
					var list = plus.webview.currentWebview().opener();
					//触发列表界面的自定义事件（refresh）,从而进行数据刷新
					mui.fire(list, 'perfectUser');
					//返回true，继续页面关闭逻辑
					return true;
				}
			})
			var Community = new mui.PopPicker(); // 报事部门
			mui.plusReady(function() {
				if (mui.os.ios) { //判断是ios还是安卓设备
				FastClick.attach(document.body);
					ws = plus.webview.currentWebview();
					ws.setStyle({
						'popGesture': 'none'
					}); //ios关闭右划
				}
				if (mui.os.android) {
					//安卓按两次关闭app
					var clickNum = 0;
					mui.back = function(event) {
						clickNum++;
						if (clickNum == 2) {
							plus.runtime.quit();
						} else {
							mui.toast("再按一次退出应用");
						}
						setTimeout(function() {
							clickNum = 0;
						}, 1500);
						return false;
					}
				}

			})
			window.addEventListener('cropper', function(e) { //执行刷新
				app.filesPath = Util.getState('filesPath')
			});
			var app = new Vue({
				el: '#app',
				data: {
					filesPath: '',
					name: '',
					housingText: '',
					housingID: '',
					buildingText: '',
					buildingID: '',
					arithmeticText: '',
					arithmeticID: '',
					houseNumberText: '',
					houseNumberID: ''
				},
				methods: {
					housingTap: function() {
						Util.GetNeighborhoodsType(function(res) { // 获取小区信息
							Community.setData(res)
						})
						var that = this
						Community.show(function(items) {
							that.housingText = items[0].text
							that.housingID = items[0].value
						})
					},
					buildingTap: function() {
						if (this.housingID == '') {
							mui.toast('请先选择小区');
							return
						}
						Util.GetBuilding(this.housingID, function(res) {
							Community.setData(res)
						})
						var that = this
						Community.show(function(items) {
							that.buildingText = items[0].text
							that.buildingID = items[0].value
						})
					},
					arithmeticTap: function() {
						if (this.buildingID == '') {
							mui.toast('请先选择楼宇');
							return
						}
						Util.GetElement(this.buildingID, function(res) {
							Community.setData(res)
						})
						var that = this
						Community.show(function(items) {
							that.arithmeticText = items[0].text
							that.arithmeticID = items[0].value
						})
					},
					houseNumberTap: function() {
						if (this.arithmeticID == '') {
							mui.toast('请先选择单元');
							return
						}

						Util.GetRoom(this.arithmeticID, function(res) {
							Community.setData(res)
						})
						var that = this
						Community.show(function(items) {
							that.houseNumberText = items[0].text
							that.houseNumberID = items[0].value
						})
					},
					headPortrait: function() { // 选择头像方法
						var that = this
						if (mui.os.plus) {
							var a = [{
								title: "拍照"
							}, {
								title: "从手机相册选择"
							}];
							plus.nativeUI.actionSheet({
								title: "修改头像",
								cancel: "取消",
								buttons: a
							}, function(b) {
								switch (b.index) {
									case 0:
										break;
									case 1:
										that.getImage()
										break;
									case 2:
										that.galleryImg();
										break;
									default:
										break
								}
							})
						}
					},

					getImage: function() { // 拍照
						var that = this
						Util.Photograph(function(res) {
							that.cutImage(res)
						})
					},
					galleryImg: function() { // 从相册里选择
						var that = this
						Util.OpenPhoto(function(res) {
							that.cutImage(res)
						})
					},

					//裁剪图片
					cutImage: function(path) {
						mui.openWindow({
							url: 'cropper.html',
							id: 'cropper',
							extras: {
								path: path,
							},
							show: {
								aniShow: 'zoom-fade-in',
								duration: 800
							},
							waiting: {
								autoShow: true
							}
						});
					},
					succeedClick: function() {
						var that = this;
						if (this.name && this.housingID && this.buildingID && this.arithmeticID && this.houseNumberID) {
							plus.nativeUI.showWaiting('加载中', {
								width: '100px',
								height: '100px'
							});
							var userID = Util.getState('$state').userID // 获取用户ID
							mui.post(Util.HTTP + 'api/Users/Authentication', {
								neiID: that.housingID, //小区ID
								buiID: that.buildingID, //楼宇ID
								eleID: that.arithmeticID, //单元ID
								roomID: that.houseNumberID, //房间ID
								userID: userID, //账号ID
								proName: that.name, //业主真实姓名
							}, function(res) {
								plus.nativeUI.closeWaiting();
								mui.toast(res.message)
								if (res.code == 1001) {
									Util.setState('neiID', {
										neiID: res.data
									})
									Util.setState('$userState', true)
									setTimeout(function() {
										mui.openWindow({
											url: '../index.html',
											id: 'index',
											show: {
												aniShow: 'pop-in'
											}, 
											waiting: {
												autoShow: false
											}
										})
									}, 1000)
								}
							})
						} else {
							mui.toast('您的信息尚未填写完整')
						}
					},

					UpProprietorInfo: function(prefix, path) {
						if (!prefix && !path) {
							mui.toast('后台图片错误')
							mui.back()
							return
						}
						var name = this.name
						var userID = Util.getState('$state').userID
						mui.post(Util.HTTP + 'api/Users/UpProprietorInfo', {
							userID: userID,
							proName: name,
							filesPrefix: prefix,
							filesPath: path
						}, function(res) {
							if (res.code == 1001) {
								plus.nativeUI.closeWaiting();
								Util.setState('$userState', true)
								mui.toast(res.message)
								setTimeout(function() {
									mui.back()
								}, 1000)
							} else {
								mui.toast('提交失败请重试')
							}
						})
					}
				}
			})
		</script>
	</body>

</html>
